<!-- Created by mhy on 2018/6/27.

 -->
 <style lang="scss" scoped>
    .add-top{
        position: relative;
        height:40px;
        font-size:28px;
        margin-top: 106px;
        color:rgba(48,54,65,1);
        line-height:40px;
        text-align: left;
    }

    .add-cancel-btn{
        position: absolute;
        width:80px;
        height:37px;
        font-size:12px;
        background:rgba(255,255,255,1);
        border-radius:5px;
        border:1px solid rgba(151,151,151,1);
        right: 0; top: 50%;
        transform: translateY(-50%);
        outline: none;
        color: #303641;
        cursor: pointer;
    }

    .add-line{
        width: 850px;
        height: 2px;
        margin: 18px 0 29px 0;
        margin-left: 50%;
        background: #979797;
        transform: translate(-50%);
    }

    .x-label{
        height:17px;
        font-size:12px;
        color:rgba(48,54,65,1);
        line-height:17px;
        margin: 30px 0 10px 0;
        text-align: left;
    }

    .pop-content{
        position: relative;
        width: 100%;
        background: #fff;
        overflow: hidden;
    }

    .pop-title{
        position: relative;
        height: 80px;
        line-height: 80px;
        font-size:28px;
        color: #303641;
        text-align: center;
        background:rgba(242,242,242,1);
    }

    .pop-close{
        float: right;
        margin-right: 15px;
        cursor: pointer;
    }

    .pop-checklist{
        padding-left: 30px; width: 100%;
        box-sizing: border-box;
    }

    .pop-item{
        text-align: left;
        height: 50px;line-height: 50px;
        font-size: 14px;
    }

    .m-mt-30{
        margin-top: 30px;
    }

    .bg-ccc{
        width: 120%; height: 30px;
        background: #f2f2f2;
        margin-left: -30px;
    }

    .bg-block-ccc{
        position: relative;
        width: 100%; height: 135px;
        background: #f2f2f2;
    }

    .submit-btn{
       position: absolute;
       width: 670px; height: 50px;
       left: 50%; top: 50%;
       transform: translate(-50%, -50%);
       font-size: 16px;
    }

    .cursor{
        cursor: pointer;
    }

    .cursor input{
        cursor: pointer!important;
    }



 </style>


 <style lang="scss">
    .x-select{
        width: 100%; height: 50px;
        margin-bottom: 30px;
        input{
           height: 50px;
           border-radius: 0!important;
           border-color: #c8c7cc!important;
        }
        .el-select-dropdown__item{
            height: 50px; line-height: 50px;
        }
    }
    .x-select.el-select .el-input.is-focus .el-input__inner {
        border-color: #c8c7cc;
    }

    .x-select.el-select .el-input__inner:focus{
        border-color: #c8c7cc;
    }
 </style>

<template>
<div class="frame-index">
    <div class="frame-content" v-loading="loading">
        <div class="add-top">
            新增平台子管理员
            <button  class="add-cancel-btn" @click="cancelAdd">取消</button>
        </div>
        <div class="add-line"></div>
        <x-input v-model="username" class="m-mb-30" label="*名字"/>
        <!-- <div class="x-label">*管理权限</div> -->
        <x-input v-model="authStr" class="m-mb-30 cursor" label="*管理权限" readonly @click.native="show = true"/>
        <x-input v-model="duty" label="职能"/>
        <button class="up-submit" :disabled="!disabled" @click="submit">生成动态二维码开通子管理员</button>
    </div>

    <yd-popup v-model="show" position="center" width="750px">
        <div class="pop-content">
            <div class="pop-title">管理权限 <yd-icon name="error" color="#FF523E" class="pop-close" @click.native='show = false'></yd-icon></div>
            <yd-checklist v-model="auth" class="pop-checklist">
                <yd-checklist-item val="frame" style="width: 100%;">
                    <div class="pop-item">框条库</div>
                </yd-checklist-item>
                <yd-checklist-item val="matcard">
                    <div class="pop-item">卡纸库</div>
                </yd-checklist-item>
                <yd-checklist-item val="background">
                    <div class="pop-item">背景库</div>
                </yd-checklist-item>
                <yd-checklist-item val="scene">
                    <div class="pop-item">场景库</div>
                </yd-checklist-item>

                <div class="bg-ccc"></div>
                <yd-checklist-item val="user">
                    <div class="pop-item">用户管理</div>
                </yd-checklist-item>
                <yd-checklist-item val="shop">
                    <div class="pop-item">商户管理</div>
                </yd-checklist-item>
                <yd-checklist-item val="factory">
                    <div class="pop-item">厂家管理</div>
                </yd-checklist-item>

                <div class="bg-ccc"></div>
              <yd-checklist-item val="viptime">
                <div class="pop-item">VIP时间管理</div>
              </yd-checklist-item>
                <yd-checklist-item val="price">
                    <div class="pop-item">VIP价格管理</div>
                </yd-checklist-item>
            </yd-checklist>
            <div class="bg-block-ccc">
                <yd-button type="primary" class="submit-btn" @click.native="changeDuty">完成</yd-button>
            </div>
        </div>
    </yd-popup>
  </div>
</template>

<script>

  import {mapActions,mapState} from 'vuex'
    export default {
      data() {
        return{
            loading: false,
            duty: '',
            username: '',
            show: false,
            auth: ['frame'],
            authObj: {
                frame: '框条库',
                matcard: '卡纸库',
                background: '背景库',
                scene: '场景库',
                user: '用户管理',
                shop: '商户管理',
                factory: '厂家管理',
                viptime: 'VIP时间管理',
                price: 'VIP价格管理'
            }
        }
      },
      components:{
      },
      methods: {
        ...mapActions([
            'openSubManager'
        ]),
        init () {
            this.username = ''
            this.auth = []
            this.duty = ''
        },
        cancelAdd() {
          this.$router.go(-1)
        },
        submit () {
          localStorage.setItem('pltusername',this.username);
          localStorage.setItem('pltauth',this.auth.join('#'));
          localStorage.setItem('pltduty',this.duty);
            this.$router.push({
                path: '/plate/scan',
                query: {
                   auth: this.auth.join('#'),
                   duty: this.duty,
                   username: this.username
                }
            })
        },
        changeDuty () {
            console.log(this.auth)
            this.show = false
        }
      },
      computed: {
        disabled () {
            return this.username && this.auth.length
        },
        authStr () {
            return this.auth.map(val => {
                return this.authObj[val]
            }).join('#')
        }
      },
      mounted (){
          this.$store.state.navTitle = '新增平台子管理员'
          this.init()
      }

    }
</script>

<style scoped lang="scss">

   .frame-index{
      position: relative;
      width: 100%; overflow: hidden;
      background:#F2F2F2;
    }

    .frame-content{
        position: relative;
        width: 710px;
        margin: 0 auto;
    }

    .up-box{
        margin: 100px auto;
    }

    .m-mb-30{
        margin-bottom: 30px;
    }

    .up-tip{
        height:17px;
        font-size:12px;
        color:rgba(48,54,65,1);
        line-height:17px;
        text-align: center;
        margin-top: 61px;
    }

    .up-submit{
        display: block;
        height:50px; width: 100%;
        background:rgba(57,184,102,1);
        border-radius:6px;
        font-size:16px;
        color: #fff;
        text-align: center; line-height: 50px;
        margin-top: 22px;
      margin-bottom: 100px;
    }

    button:disabled {
        opacity: .5;
    }

    .up-cancel{
        @extend .up-submit;
        color:rgba(48,54,65,1);
        background: #fff;
        margin-bottom: 90px;
    }

</style>
